<template>
  <div class="record">
    <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
    <div class="record-select" :class="{'ispc':mobile==2}">
      <ul>
        <li v-for="(item,k) in tabData" :key="k" :class="{on:item.id == status}" @click="onTab(item)">
          {{item.name}}
        </li>
      </ul>
      <!--            <div class="select-item flexcenter" @click="showType = true">{{  typeName  }} <img-->
      <!--                    src="../../assets/images/arrow_down_grey_1.png" alt="" /></div>-->
      <!--            <div class="select-item flexcenter" @click="showProfit = true">{{  profitName  }} <img-->
      <!--                    src="../../assets/images/arrow_down_grey_1.png" alt="" /></div>-->
      <!--            <div class="select-item flexcenter" @click="showIcon = true">{{  iconName  }} <img-->
      <!--                    src="../../assets/images/arrow_down_grey_1.png" alt="" /></div>-->
    </div>
    <div class="record-con">
      <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" @load="onLoad">
        <van-cell v-for="(item, index) in list" :key="index">
          <div class="order-info" @click="$router.push(`/recordinfo?sn=${item.sn}`)">
            <div class="type">
              <div v-if="item.status == 1">{{$t('new.desc100')}}</div>
              <div v-else-if="item.status==0 && item.profitStatus=='-1' && item.timeInterval==0">{{$t('new.desc88')}}</div>
              <div v-else>
                <p>{{ $t('new.desc90') }}</p>
                <p>
                  <van-count-down :time="item.laveSeconds * 1000"
                                  @finish="handlerFinsh($event, item.sn, index)" />
                </p>
              </div>
            </div>
            <div class="info">
              <div class="info-icon">{{item.coinPair}} <p v-if="item.type==0">{{$t('new.desc62')}}</p><p class="iconcolor" v-else>{{$t('new.desc63')}}</p></div>
              <div class="info-num">{{$t('new.desc101')}}<span>{{item.amount}}</span> </div>
              <div class="info-price">
                <p>{{$t('new.desc101')}}<span>{{item.buyPrice}}</span></p>
                <p v-if="item.status==1">{{$t('new.desc105')}}<span>{{item.openingPrice}}</span></p>
                <p v-else>{{$t('new.desc102')}}<span>{{item.currenPrice}}</span></p>
              </div>
            </div>
            <div class="time">
              <div class="date">{{item.createTime}}</div>
              <div class="null-status" v-if="item.status==0">{{$t('new.desc103')}}</div>
              <div class="money" :class="{color1:item.profitStatus==0}" v-else><span v-if="item.profitStatus==0">+</span> <span v-else>-</span>{{item.incomeAmount}}</div>
            </div>
          </div>
        </van-cell>
      </van-list>
      <div class="show-null" v-if="showNull">
        <img src="../../assets/images/fianacial_no_data.png" alt="" />
        <p>{{$t('new.desc104')}}</p>
      </div>
    </div>
    <!-- 状态 -->
    <van-popup v-model="showType" position="bottom" round :closeable="true">
      <div class="showModal">
        <div class="title">{{ $t('new.desc99') }}</div>
        <div class="modal-list">
          <div class="list-info" v-for="item in typeAll" :key="item.id" @click="handlerType(item)">
            <div>{{ item.name }}</div>
            <img src="../../assets/images/check_normal.png" alt="" v-if="item.name != typeName" />
            <img src="../../assets/images/checked_look_agreement_img.png" alt="" v-else />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 盈亏 -->
    <van-popup v-model="showProfit" position="bottom" round :closeable="true">
      <div class="showModal">
        <div class="title">{{ $t('new.desc61') }}</div>
        <div class="modal-list">
          <div class="list-info" v-for="item in profitList" :key="item.id" @click="handlerProfit(item)">
            <div>{{ item.name }}</div>
            <img src="../../assets/images/check_normal.png" alt="" v-if="item.name != profitName" />
            <img src="../../assets/images/checked_look_agreement_img.png" alt="" v-else />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 币种 -->
    <van-popup v-model="showIcon" position="bottom" round :closeable="true">
      <div class="showModal">
        <div class="title">{{ $t('new.desc98') }}</div>
        <div class="modal-list">
          <div class="list-info" v-for="item in iconList" :key="item.id" @click="handlerIcon(item)">
            <div>{{ item.buyCoinName }}</div>
            <img src="../../assets/images/check_normal.png" alt="" v-if="item.buyCoinName != iconName" />
            <img src="../../assets/images/checked_look_agreement_img.png" alt="" v-else />
          </div>
        </div>
      </div>
    </van-popup>
    <bottom_nav :activeTitle="activeTitle"></bottom_nav>

  </div>

</template>

<script>
export default {
  data() {
    return {
      cid:0,
      tabData:[
        {name:this.$t('new.doc16'),id:0},
        {name:this.$t('new.doc17'),id:1}
      ],
      mobile:localStorage.getItem('ismobile'),
      finished: false,
      activeTitle:this.$t("new.doc15"),
      loading: false,
      showProfit: false,
      showType: false,
      showIcon: false,
      titleSize: this.$t('new.desc91'),
      is_mt: true,
      typeName: this.$t('new.desc92'),
      profitName: this.$t('new.desc95'),
      iconName: this.$t('new.desc98'),
      status: 0,
      profitStatus: '',
      buyCoinId: '',
      typeAll: [
        {
          id: '',
          name: this.$t('new.desc92')
        }, {
          id: 0,
          name: this.$t('new.desc93')
        }, {
          id: 1,
          name: this.$t('new.desc94')
        }
      ],
      profitList: [
        {
          id: '',
          name: this.$t('new.desc95')
        }, {
          id: '-1',
          name: this.$t('new.desc88')
        }, {
          id: 0,
          name: this.$t('new.desc96')
        }, {
          id: 2,
          name: this.$t('new.desc97')
        }
      ],
      iconList: [
        {
          id: '',
          buyCoinName: this.$t('new.desc98')
        }
      ],
      list: [],
      page:1,
      showNull:false
    }
  },
  mounted() {
    this.$post(this.URL.member.iconListConfig, {}).then(res => {
      if (res.code == 0) {
        this.iconList = this.iconList.concat(res.data)
      }
    })
  },
  methods: {
    handlerFinsh(e, sn, i) {
      this.$post(this.URL.user.orderinfo, {
        sn: sn
      }).then(res => {
        if (res.code == 0) {
          this.list[i] = res.data;
          this.userOrderlist = this.list;
        }
      })
    },
    onLoad() {
      setTimeout(() => {
        this.$post(this.URL.user.order, {
          page: this.page,
          status: this.status,
          profitStatus: this.profitStatus,
          buyCoinId: this.buyCoinId
        }).then(res => {
          if (res.code == 0) {
            if(res.data.list !=''){
              res.data.list.forEach(e =>{
                e.coinPair=e.coinPair.replace('/USDT','')
              })
            }
            if (this.page == 1) {
              this.list = res.data.list
            } else {
              this.list = this.list.concat(res.data.list)
            }
            if(this.list.length==0){
              this.showNull=true;
            }
            if (res.data.list.length > 9) {
              this.page++;
            }
            this.loading = false;
            if (this.list.length >= parseFloat(res.data.page.count)) {
              this.finished = true;
            }
          } else {
            this.$toast(res.message)
          }
        })
      }, 500);
    },
    handlerType(item) {
      this.typeName = item.name;
      this.status = item.id;
      this.showType = false;
      this.page=1;
      this.list=[];
      this.finished=false;
      this.showNull=false;
      this.onLoad()
    },
    handlerProfit(item) {
      this.profitName = item.name;
      this.profitStatus = item.id;
      this.showProfit = false;
      this.page=1;
      this.list=[];
      this.finished=false;
      this.showNull=false;
      this.onLoad()
    },
    handlerIcon(item) {
      this.iconName = item.buyCoinName;
      this.buyCoinId = item.buyCoinId;
      this.showIcon = false;
      this.showNull=false;
      this.page=1;
      this.list=[];
      this.finished=false;
      this.onLoad()
    },
    onTab(item){
      this.status = item.id;
      this.showType = false;
      this.page=1;
      this.list=[];
      this.finished=false;
      this.showNull=false;
      this.onLoad()
    }

  }
}
</script>

<style lang="less" scoped>
.record {
  min-height: 100vh;

  .record-select {
    position: fixed;
    top: .88rem;
    left: 0;
    width: 100%;
    z-index: 5;
    background: #131e30;
    ul {
      display: flex;
      align-items: center;
      width: 100%;
      background:#172941;

      li {
        padding: .32rem .32rem;
        text-align: center;flex:1;
        &.on {
          color: #caa03a;
        }
      }
    }

    .select-item {
      flex: 0 0 30%;
      height: .8rem;
      border: 0.02rem solid #E8E9EB;
      border-radius: .08rem;
      font-size: .26rem;
      box-sizing: border-box;background: #131e30;

      img {
        width: .26rem;
        margin-left: .1rem;
        height: .16rem;
      }

      &:first-child {
        margin-left: .2rem;
      }

      &:last-child {
        margin-right: 0.2rem;
      }
    }
  }

  .record-con {
    padding: 2.2rem .24rem 1.2rem .24rem;
    /deep/ .van-cell{
      background: #172941;
      margin-bottom: .2rem;
      border-radius: .2rem;

      padding: 0;
      &::after{
        border-bottom: 0;
      }
    }
    .order-info{
      display: flex;
      padding: .3rem .2rem;
      justify-content: space-between;
      overflow: hidden;
      .type{
        flex: 0 0 .8rem;
        padding-right: .2rem;
        margin-top: .2rem;
        font-size: .24rem;
        display: none;
        color: #666666;
        /deep/ .van-count-down{
          font-size: .2rem;
        }
      }
      .info{

        flex: 0 0 3.3rem;
        .info-icon{
          color: #fff;
          display: flex;
          font-size: .3rem;
          p{
            height: .36rem;
            margin:0.05rem 0 0 .2rem;
            background: #5EBA89;
            padding: 0 .2rem;
            line-height: .36rem;
            font-size: .2rem;
            color: #fff;
            border-radius: 0.08rem;
          }
          .iconcolor{
            background:#FF383A;
          }
        }
        .info-num,.info-price{
          display: flex;
          font-size: .22rem;
          color: #999999;
          span{
            color: #666666;
          }
        }
        .info-price p:first-child{
          margin-right: .2rem;
        }
      }
      .time{
        text-align: right;
        .date{
          font-size: .24rem;
          color: #999999;
          word-break: break-all;

        }
        .money{
          padding: 0.43rem 0 0 0;
          font-size: .32rem;
          color: #FF383A;
        }
        .color1{
          color: #5EBA89;
        }
        .null-status{
          margin-top: .3rem;
          color: #333;
        }
      }
    }
    .show-null{
      padding: 2rem 0;
      text-align: center;
      font-size: .28rem;
      color: #666666;
      img{
        width: 2rem;
        margin-bottom: .2rem;
      }
    }
  }

  .showModal {
    padding: 0 .2rem .5rem;

    .title {
      padding: .3rem 0;
      text-align: center;
      font-size: .3rem;
      border-bottom: 0.01rem solid #E8E9EB;
    }

    .list-info {
      padding: .2rem 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.01rem solid #E8E9EB;
      font-size: .28rem;
      color: #333;

      img {
        width: .48rem;
        height: .48rem;
      }
    }
  }
}
.modal-list {
  height: 5rem;
  overflow: auto;
}
</style>
